<style type="text/css">
    #image {
        width: 160px;
        height: 160px;
        overflow: hidden;
        cursor: pointer;
        background: #000;
        color: #fff;
    }

    #image img {
        visibility: hidden;
    }
</style>

<script type="text/javascript">
    function openKCFinder(div) {
        window.KCFinder = {
            callBack: function (url) {
                window.KCFinder = null;
                div.innerHTML = '<div style="margin:5px">Loading...</div>';
                var img = new Image();
                img.src = url;
                img.onload = function () {
                    div.innerHTML = '<img id="img" src="' + url + '" />';
                    var img = document.getElementById('img');
                    var o_w = img.offsetWidth;
                    var o_h = img.offsetHeight;
                    var f_w = div.offsetWidth;
                    var f_h = div.offsetHeight;
                    if ((o_w > f_w) || (o_h > f_h)) {
                        if ((f_w / f_h) > (o_w / o_h))
                            f_w = parseInt((o_w * f_h) / o_h);
                        else if ((f_w / f_h) < (o_w / o_h))
                            f_h = parseInt((o_h * f_w) / o_w);
                        img.style.width = f_w + "px";
                        img.style.height = f_h + "px";
                    } else {
                        f_w = o_w;
                        f_h = o_h;
                    }
                    img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px';
                    img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px';
                    img.style.visibility = "visible";
                }
            }
        };

        window.open('/cloudcms/js/kcfinder/browse.php?type=images&dir=images/public',
            'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
                'directories=0, resizable=1, scrollbars=0, width=800, height=600'
        );
    }
</script>

<div class="form">
    <?php
    /** @var ArticleController $this */
    /** @var Article $model */
    /** @var AweActiveForm $form */
    $form = $this->beginWidget('ext.AweCrud.components.AweActiveForm', array(
        'id' => 'article-form',
        'id' => 'horizontalForm',
        'type' => 'horizontal',
        'enableAjaxValidation' => true,
        'enableClientValidation' => false,
    )); ?>

    <p class="note">
        <?php echo Yii::t('AweCrud.app', 'Fields with') ?> <span class="required">*</span>
        <?php echo Yii::t('AweCrud.app', 'are required') ?>. </p>

    <?php echo $form->errorSummary($model) ?>

    <?php echo $form->textFieldRow($model, 'title', array('class' => 'span5', 'maxlength' => 250)) ?>
    <?php echo $form->textFieldRow($model, 'sort_id', array('class' => 'span5')) ?>

    <?php echo $form->checkBoxRow($model, 'is_active') ?>
    <?php echo $form->datepickerRow($model, 'created_date', array('prepend' => '<i class="icon-calendar"></i>')) ?>
    <?php echo $form->dropDownListRow($model, 'catalog', CHtml::listData(Catalog::model()->findAll(), 'id', Catalog::representingColumn())) ?>
    <?php echo $form->textAreaRow($model, 'summary', array('rows' => 6, 'cols' => 50, 'class' => 'span8')) ?>
    <!--    image form-->
    <?php echo $form->hiddenField(Image::model(), 'title'); ?>
    <?php echo $form->hiddenField(Image::model(), 'alt'); ?>
    <?php echo $form->hiddenField(Image::model(), 'url'); ?>
    <div class="control-group ">
        <label class="control-label" for="Article_catalog">Image</label>

        <div class="controls">
            <?php
            if (!empty($model->image)) {
                ?>
                <img id="img1" src="<?php echo $model->image->url; ?>"/>
            <?php
            } else {
                ?>
                <img id="img1"/>
            <?php
            }
            ?>
            <?php
            // the button that may open the dialog
            $this->widget('zii.widgets.jui.CJuiButton', array(
                'name' => 'btndialog',
                'caption' => 'Choose image',
                'onclick' => new CJavaScriptExpression('function(){$("#mydialog").dialog("open"); return false;}'),
            ));
            ?>
        </div>
    </div>


    <div class="form-actions">
        <?php $this->widget('bootstrap.widgets.TbButton', array(
            'buttonType' => 'submit',
            'type' => 'primary',
            'label' => $model->isNewRecord ? Yii::t('AweCrud.app', 'Create') : Yii::t('AweCrud.app', 'Save'),
        )); ?>
        <?php $this->widget('bootstrap.widgets.TbButton', array(
            //'buttonType'=>'submit',
            'label' => Yii::t('AweCrud.app', 'Cancel'),
            'htmlOptions' => array('onclick' => 'javascript:history.go(-1)')
        )); ?>
    </div>

    <?php $this->endWidget(); ?>
</div>
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'mydialog',
    // additional javascript options for the dialog plugin
    'options' => array(
        'title' => 'Choose Image',
        'autoOpen' => false,
        'width' => '450px',
        'height' => '420',
        'modal' => true,
        'buttons' => array(
            array('text' => 'Finish', 'click' => 'js:function(){
                    $(this).dialog("close");
                    $("#Image_title").val($("#title").val());
                    $("#Image_alt").val($("#alt").val());
                    $("#Image_url").val($("#img").attr("src"));
                    $("#img1").attr("src",$("#img").attr("src"));
                    }'),
            array('text' => 'Cancel', 'click' => 'js:function(){$(this).dialog("close");}'),
        ),
    ),
));?>

<div class="form-horizontal">
    <div class="control-group ">
        <label class="control-label" for="Image_title">Title</label>

        <div class="controls">
            <input type="text" name="title" id="title"/>
        </div>
    </div>
    <div class="control-group ">
        <label class="control-label" for="Alt_title">Alt</label>

        <div class="controls">
            <input type="text" name="alt" id="alt"/>
        </div>
    </div>
    <div class="control-group ">
        <label class="control-label" for="Image_image">Image</label>

        <div class="controls">
            <div id="image" onclick="openKCFinder(this)">
                <div style="margin:5px">Click here to choose an image</div>
            </div>
        </div>
    </div>
</div>
<?php
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>